<template>
  <div>
    <el-header height="0.45rem" class="gw-header">
      <div class="content-area">
        <router-link class="logo" :to="{name: logoTo}">
          <span>{{title}}</span>
        </router-link>
        <div class="rightHeaderContent">
          <div class="head-search" v-if="searchShow">
            <search-people @search="search"></search-people>
          </div>
          <div class="navBox">
            <span v-for="(i,index) in navList" :key="index" :class="[navpath && navpath.indexOf(i.pathName) > -1?'navItem navActiveItem':'navItem',{noclick: i.pathName==='pathName'}]" @click="i.pathName==='pathName' ? '' : goPath(i)">{{i.name}}</span>
          </div>
          <div class="userInfo cursor" @click="PwdTip = !PwdTip">
            <i class="iconfont icon-user mr5"></i>
            <span class="username">{{username}}</span>
          </div>
          <div class="fullscreen" @click="fullScreen" :title="isFull?'退出全屏':'全屏'">
            <i class="iconfont" :class="isFull?'icontuichuquanping1':'icon-fullscreen'"></i>
          </div>
        </div>
      </div>
    </el-header>
    <transition name="el-zoom-in-top">
      <div class="PwdTip" v-if="PwdTip">
        <div class="content row">
          <div class="pic">
            <img :src="logoImg" alt="">
          </div>
          <div class="infor">
            <p class="account-info">
              <span class="account-name">{{username}}</span>
              <span>登录次数：{{userInfor.loginTimes}}</span>
            </p>
            <!-- <p class="alignLeft">{{username}}</p> -->
            <p class="alignLeft"><span>上次登录：</span>{{userInfor.lastLoginTime}}</p>
            <!-- <p class="alignLeft"><span>登录次数：</span>{{userInfor.loginTimes}}</p> -->
          </div>
        </div>
        <div class="account-center row" v-if="iszuhu === '0'">
          <div class="person-center center-item" @click="goAccountCenter('perCenter')">
            <i class="iconfont iconicongerenzhongxin-01"></i>
            <span>个人中心</span>
          </div>
          <div class="finance-center center-item" @click="goAccountCenter('finance')">
            <i class="iconfont iconqianbao"></i>
            <span>财务中心</span>
          </div>
        </div>
        <div v-else style="height:50px;"></div>
        <div class="footer row">
          <el-button type="primary" @click="signOut"><i class="out"></i>退出</el-button>
          <el-button type="primary" @click="showHide"><i class="modifys"></i>修改密码</el-button>
        </div>
      </div>
    </transition>

    <div class="opcity_mask" v-if="opcityMask" @click="PwdTip = false"></div>

    <el-dialog :visible.sync="modifiy" class="normalDialog" title="修改密码">
      <div class="content">
        <div class="row">
          <label><span>*</span> 旧密码：</label>
          <el-input :class="{errorPwd:basePwd}" type="password" v-model="oldPwd" placeholder="请输入旧密码"></el-input>
          <transition name="el-zoom-in-top">
            <p class="tipText" ref="erro_1" v-show="basePwd">{{tipText_1}}</p>
          </transition>
        </div>
        <div class="row">
          <label><span>*</span> 新密码：</label>
          <el-input  :class="{errorPwd:newPwdTip}" type="password" v-model="newPwd" placeholder="请输入新密码"></el-input>
          <p class="tipText" ref="erro_3" v-show="rulerPwd">6-32个字符，请使用字母加数字或符号组合</p>
          <transition name="el-zoom-in-top">
            <p class="tipText" ref="erro_3" v-show="newPwdTip">{{tipText_2}}</p>
          </transition>
        </div>
        <p class="pswStrong alignLeft" v-show="showPswStrong">
          <span class="fl low " :class="{lowColor:strongLeve == 1 || strongLeve == 2 || strongLeve == 3}"></span>
          <span class="fl mid " :class="{midColor:strongLeve == 2 || strongLeve == 3}"></span>
          <span class="fl high" :class="{highColor:strongLeve == 3}"></span>
          <label>安全强度：</label>
          <i class="lowColor"  v-if="strongLeve == 1">低</i>
          <i class="midColor"  v-if="strongLeve == 2">中</i>
          <i class="highColor" v-if="strongLeve == 3">高</i>
        </p>
        <div class="row">
          <label class="againNewPwd"><span>*</span>   确认新密码：</label>
          <el-input :class="{errorPwd:againBasePwd}" type="password" v-model="againNewPwd" placeholder="请再次输入新密码"></el-input>
          <transition name="el-zoom-in-top">
            <p class="tipText" ref="erro_2" v-show="againBasePwd">{{tipText_3}}</p>
          </transition>
        </div>
      </div>
      <div class="footer" style="text-align:center;">
        <el-button type="primary" @click="checkPwdInfor">确 认</el-button>
        <el-button @click="close">取 消</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script type="text/babel">
import sha256 from 'js-sha256'
import request from '../../utils/request'
import constant from '../../utils/constant'
import searchPeople from '@/components/situation/parkSearch'
import { getLogo } from '@/api/app'
import qs from 'qs'
const local = window.localStorage
export default {
  components:{
      searchPeople
  },
  data() {
    return {
      searchShow: false,
      title: '',
      logoImg: require('@/assets/baseImg/logo_user.jpg'),
      modifiy: false,
      PwdTip: false,
      path: '',
      navpath: '',
      opcityMask: false,
      userInfor: {},
      username: window.localStorage.getItem('username') || 'admin',
      navList: [],
      oldPwd:'',
      newPwd:'',
      againNewPwd:'',
      strongLeve:1,
      // 密码错误提示
      basePwd:false,
      againBasePwd:false,
      newPwdTip:false,
      showPswStrong:false,
      tipText_1:'',
      tipText_2:'',
      tipText_3:'',
      //检验次数
      checkNums:0,
      rulerPwd:true,
      iszuhu: '',
      isFull: false,
      logoTo: ''
    }
  },
  watch:{
    $route(to, from) {
        this.path = this.$route.meta.name
        this.navpath =  this.$route.meta.parent
        if(JSON.parse(local.getItem('menuList')).some(({id})=>id=='807')){
            if(this.navpath === 'parkResult' || this.navpath === 'myvgs'){
              this.searchShow = false
            }else{
              this.searchShow = true
            }
        }
    },
    //密码强度
    newPwd:function () {
      if(this.newPwd){
        this.showPswStrong = true;
        this.rulerPwd =false;
        this.newPwdTip = false;
        let leve =  this.checkStrong(this.newPwd);
        if(leve == 1){
          this.strongLeve =1;
        }
        if(leve == 2){
          this.strongLeve = 2;
        }
        if(leve == 3){
          this.strongLeve = 3;
        }
      }else{
        this.rulerPwd =true;
        this.newPwdTip = false;
        this.showPswStrong = false;
      }
    },
    againNewPwd:function () {
      let _againNewPwd = this.againNewPwd.trim();
      if(_againNewPwd.length == 0){
        this.againBasePwd = false;
      }else {
        this.againBasePwd = false;
      }
    },
    //监控修改或者退出的弹窗的透明遮罩
    PwdTip:function () {
      if(this.PwdTip){
        this.opcityMask = true;
      }else{
        this.opcityMask = false;
      }
    },
    // 旧密码
    oldPwd:function () {
      if(this.oldPwd !== ''){
        this.basePwd = false;
      }
    }
  },
  mounted() {
    this.navList = [];
    if(JSON.parse(local.getItem('menuList')).some(({id})=>id=='807')){
      if(this.navpath === 'parkResult' || this.navpath === 'myvgs'){
        this.searchShow = false
      }else{
        this.searchShow = true
      }
    }else{
      this.searchShow = false
    }
    // 一级菜单排序：态势广场、视频中心、智能应用、数据看板、行业应用、管理中心
    let list = JSON.parse(local.getItem('menuList')).map(info=>{
        if(info.id === '808'){
          info.index = 1
        }else if(info.id === '805'){
          info.index = 2
        }else if(info.id === '807'){
          info.index = 3
        }else if(info.id === '806'){ 
          info.index = 6
        }
        return info
    })
    list.forEach(item => {
        if(item.id != '800' && item.id != '803' && item.id != '804'  && item.id != '808'){
            this.navList.push(item) 
        }else if(item.id == '808'){
            item.pathName = 'parkService'
            this.navList.push(item) 
        }
    });
    if(JSON.parse(local.getItem('menuList')).some(({id})=>id=='808')){
      this.navList.push(
        {name: '数据看板',pathName:'dataBoard',index: 4},
        {name: '行业应用',pathName:'pathName',index: 4}
      )
    }  
    this.navList = this.navList.sort((a,b)=>a.index-b.index)
    this.path =  this.$route.meta.name
    this.navpath =  this.$route.meta.parent
    // 添加全屏监控
    this.listenerFS()
    // 绑定修改logo事件
    this.Bus.$on('changeTitle', () => {
      this.getLogo()
    })
  },
  created() {
    this.userinfo()
    if (JSON.parse(local.getItem('menuList')).some(({id})=>id=='808')) {
      this.logoTo = 'parkService'
    } else {
      this.logoTo = 'index'
    }
  },
  methods: {
    listenerFS() {
      var fcChange = () => {
        this.isFull = this.isFullScreen()
      }
      document.addEventListener('fullscreenchange', () => { fcChange() })
      document.addEventListener('webkitfullscreenchange', () => { fcChange() })
      document.addEventListener('mozfullscreenchange', () => { fcChange() })
      document.addEventListener('MSFullscreenChange', () => { fcChange() })
    },
    isFullScreen() {
      return !! (
        document.fullscreen ||
        document.mozFullScreen ||
        document.webkitIsFullScreen ||
        document.webkitFullScreen ||
        document.msFullScreen
      )
    },
    exitFullscreen() {
      if (document.exitFullScreen) {
        document.exitFullScreen()
      } else if (document.mozCancelFullScreen) {
        document.mozCancelFullScreen()
      } else if (document.webkitExitFullscreen) {
        document.webkitExitFullscreen()
      } else if (document.msExitFullscreen) {
        document.msExitFullscreen()
      }
    },
    // 全屏
    fullScreen() {
      if (this.isFullScreen()) {
        this.exitFullscreen()
        this.isFull = false
        return
      }
      const el = $('.app-layout').get(0)
      const rfs = el.requestFullScreen || el.webkitRequestFullScreen || el.mozRequestFullScreen || el.msRequestFullScreen
      if (typeof rfs !== 'undefined' && rfs) {
        rfs.call(el)
        this.isFull = true
        return
      }
      if (typeof window.ActiveXObject !== 'undefined') {
        const wscript = new ActiveXObject('WScript.Shell')
        if (wscript) {
          wscript.SendKeys('{F11}')
        }
      }
    },
    //搜索人员信息
    search(val){
        let routeData = this.$router.resolve({
            name: 'parkResult',
            query: val
        });
        window.open(routeData.href, '_blank');
    },
    // 个人中心和财务中心跳转
    goAccountCenter(name) {
      this.PwdTip = false
      this.$router.push({ name })
    },
    userinfo: function () {
      request({
        method: 'get',
        url: constant.loginInfo,
        xhrFields: {withCredentials: true},
        headers: {
          'Content-Type': 'application/x-www-form-urlencoded; charset=UTF-8'
        },
        params: {
          name: local.getItem('username')
        }
      }).then(res => {
        if (res.data.code === 0) {
          res.data.data.userCodeName ? this.title = res.data.data.userCodeName : window.bcmpConfig.appName // 页面中的title
          document.title = this.title //网站标题的title
          local.setItem('userId', res.data.data.userId)
          local.setItem('iszuhu', res.data.data.iszuhu)
          this.iszuhu = res.data.data.iszuhu
          if(res.data.data.userCode == null){
            local.setItem('userCode', '')
          }else{
            local.setItem('userCode', res.data.data.userCode)
          }
          this.userInfor = res.data.data
          document.cookie=res.data.data.userId; 
        } else if (res.data.code === -3) {
          this.title = window.bcmpConfig.appName
          document.title = this.title // 网站标题的title
          this.$router.push('/login')
        }
        this.getLogo()
      }).catch(err => {
        this.getLogo()
        return err
      })
    },
    getLogo() {
      getLogo().then(res => {
        if (res.data.code === 0 && res.data.data) {
          this.title = res.data.data.systemName
          this.logoImg = res.data.data.logoBase64
        }
      }).catch(err => {
        console.log(err)
      })
    },
    goPath: function(i) {
      if(i.pathName === "myvgs"){
        if ($.inArray('8000006',JSON.parse(local.getItem('menuCodeList'))) === -1) {
          this.$message.info('暂无开通此权限')
          return false
        } else {
          this.$router.push({name: i.pathName})
        }
      }else{
          this.$router.push({name: i.pathName})
      }
    },
    signOut: function() {
      // window.localStorage.removeItem('isLogin')
      // this.$store.dispatch('Logout')
      request({
        method: 'get',
        url: constant.logout,
        headers: {
          'Content-Type': 'application/x-www-form-urlencoded; charset=UTF-8'
        }
      }).then(res => {
        if (res.data.code === 0) {
          if (!window.localStorage.getItem('checked')) {
            window.localStorage.removeItem('pwd')
            window.localStorage.removeItem('username')
            window.localStorage.removeItem('userCode')
            window.localStorage.removeItem('isLogin')
          }
          localStorage.clear()
          this.test()
        } else if (res.data.code === -3) {
          this.test()
        }
      })
    },
    test: function () {
      request({
        method: 'get',
        url: constant.test,
        headers: {
          'Content-Type': 'application/x-www-form-urlencoded; charset=UTF-8',
        }
      }).then(res => {
        if (res.data.code === -3) {
          localStorage.clear()
          this.$router.push({
            path: '/login'
          })
        }
      })
    },
    showHide: function() {
      this.modifiy = true;
      this.PwdTip = false
    },
    //判断密码强度
    checkStrong(string){
      if(string.length >=6) {
        if(/[a-zA-Z]+/.test(string) && /[0-9]+/.test(string) && /\W+\D+/.test(string)) {
          return 3;
        }else if(/[a-zA-Z]+/.test(string) || /[0-9]+/.test(string) || /\W+\D+/.test(string)) {
          if(/[a-zA-Z]+/.test(string) && /[0-9]+/.test(string)) {
            return 2;
          }else if(/\[a-zA-Z]+/.test(string) && /\W+\D+/.test(string)) {
            return 2;
          }else if(/[0-9]+/.test(string) && /\W+\D+/.test(string)) {
            return 2;
          }else{
            return 1;
          }
        }
      }else{
        return 1;
      }
    },
    close () {
      this.modifiy = false;
      this.oldPwd ='';
      this.newPwd ='';
      this.againNewPwd = '';
    },
    //提交密码
    submit (newPwd) {
      let _oldPwd  = this.oldPwd.trim();
      let _useName = window.localStorage.getItem('username')
      const _obj = {
        name:_useName,
        oldPassword:sha256(_oldPwd),
        newPassword:sha256(newPwd)
      };
      request({
        method: 'POST',
        url: constant.password,
        headers: {
          'Content-Type': 'application/x-www-form-urlencoded; charset=UTF-8'
        },
        data: qs.stringify(_obj)
      }).then(res =>{
        if (res.data.code === 0) {
          this.modifiy = false;
          this.oldPwd ='';
          this.newPwd ='';
          this.againNewPwd = '';
          this.$message.success(res.data.msg)
          window.localStorage.removeItem('pwd')
          // window.localStorage.removeItem('username')
          window.localStorage.removeItem('isLogin')
          window.localStorage.removeItem('userId')
          window.localStorage.removeItem('userCode')
          localStorage.removeItem('checked')
          this.signOut();
        } else {
          this.$message.error(res.data.msg)
        }
      }).catch(err => {
        this.$message.error(err)
      })
    },
    //验证密码是否正确
    checkPwdInfor () {
      //检测组合正则
      let _checkNum = new RegExp("[0-9]");
      let _checkEn = new RegExp("[a-zA-Z]");
      let _checkSymb = new RegExp("((?=[\x21-\x7e]+)[^A-Za-z0-9])");
      let [_newPwd, _againNewPwd, _oldPwd] = [this.newPwd.trim(), this.againNewPwd.trim(), this.oldPwd.trim()]
      let checkNums = 0; // 检验次数
      _checkNum.test(_newPwd)?checkNums++ : checkNums = checkNums;
      _checkEn.test(_newPwd)?checkNums++ : checkNums = checkNums;
      _checkSymb.test(_newPwd)?checkNums++ : checkNums = checkNums;
      if(_oldPwd == ''){
        this.tipText_1 = '旧密码不能为空！'
        this.basePwd = true;
        return;
      }
      if(_newPwd == ''){
        this.tipText_2 = '新密码不能为空！'
        this.newPwdTip = true;
        return;
      }
      if(_againNewPwd == ''){
        this.tipText_3 = '确认新密码不能为空！'
        this.againBasePwd = true;
        return;
      }
      if(checkNums <= 1 || _newPwd.length < 6 || _newPwd.length > 32){
        this.tipText_2 = '新密码应6-32个字符，字母加数字或符号组合'
        this.newPwdTip = true;
        return;
      }
      if(_newPwd !== _againNewPwd){
        this.tipText_3 = '两次输入密码不一致！'
        this.againBasePwd = true;
        return;
      }else{
        this.againBasePwd = false;
        this.submit(_newPwd)
      }
    },
    //获取用户信息
    getUserInfor() {
      let _name = window.localStorage.getItem('userName')
      getUserInfor(_name).then((res) =>{
        if(res.code == 0 && res.data){
          this.userInfor = res.data;
        }
      })
    }
  }
}
</script>

<style lang="scss">
  .gw-header{
    height: 50px;
    color: #fff;
    background: #1183fb -webkit-gradient(linear,right top,left top,from(#0a48d1),to(#1183fb));
    background: #1183fb -webkit-linear-gradient(right,#0a48d1 0,#1183fb 100%);
    background: #1183fb -o-linear-gradient(right,#0a48d1 0,#1183fb 100%);
    background: #1183fb linear-gradient(-90deg,#0a48d1 0,#1183fb 100%);
    background-color: #1183fb;
    border-top-color: #0c64eb;
    border-bottom-color: #e9f2fb;
    width:100%;
    min-width: 1300px;
    // background: $color-primary;
    /*min-width: 1320px;*/
    // box-shadow:0px 4px 8px 0px rgba(0, 0, 0, 0.1);
    // background:rgba(255,255,255,1);
    // box-shadow:0px 3px 6px rgba(0,0,0,0.1);
    position: fixed;
    left: 0;
    left: 0;
    top: 0;
    z-index: 2200;
    .content-area {
      /*width: 1800px;*/
      // min-width:800px;
      width:100%;
      /*background:red;*/
      height: 45px;
      margin: 0 auto;
      display:flex;
      justify-content: space-between;
      align-items: center;
      .logo {
        height: 45px;
        line-height: 45px;
        display: inline-block;
        cursor: pointer;
        // color: #fff;
        color: #fff;
        position: relative;
        i {
          font-size: 26px;
          position: relative;
          top: -2px;
        }
        span {
          display: inline-block;
          vertical-align: top;
          font-size: 22px;
          margin-left: 10px;
        }
      }
      .rightHeaderContent{
        height: 100%;
        display: flex;
        justify-content: space-between;
        align-items: center;
        .fullscreen {
          margin-left: 20px;
          cursor: pointer;
        }
      }
      .head-search{
        height: 34px;
        margin-right: 30px;
      }
      .navBox{
        margin-right:50px;
        height: 100%;
        .navItem{
          box-sizing: border-box;
          height: 100%;
          line-height: 27px;
          padding: 10px 15px;
          color: #fff;
          border-radius: 0;
          opacity: .9;
          display:inline-block;
          font-size:15px;
          font-family:Microsoft YaHei;
          text-align:center;
          cursor:pointer;
          &.noclick{
            color: #fff;
            opacity: .6;
            cursor: auto;
          }
        }
        .navActiveItem{
          font-weight: 700;
          background: rgba(0,0,0,.1);
          opacity: 1;
        }
      }
      .userInfo{
        font-size:14px;
        // color:white;
        color: #fff;
        opacity: .9;
      }
      .username{
        font-size: 16px;
        color: #fff;
        opacity: .9;
      }
    }
  }
  .PwdTip{
    width:405px;
    // height: 205px;
    background-color: #fff;
    position: fixed;
    top: 45px;
    right: 18px;
    color: #000;
    box-shadow: 0 -4px 12px 0 rgba(0,0,0,0.15);
    z-index: 20000;
    .content{
      padding: 15px 26px;
      .pic{
        width: 72px;
        height: 72px;
        border: 1px solid transparent;
        border-radius: 50%;
        overflow: hidden;
        img{
          display: block;
          width: 100%;
          height: auto;
          max-height: 100%;
        }
      }
      .infor{
        width: calc(100% - 72px);
        padding-left: 25px;
        .account-info {
          display: flex;
          justify-content: space-between;
          .account-name {
            color: #0098EA;
            padding-bottom: 14px;
          }
        }
        p{
          line-height: .25rem;
          span{
            color: rgba(0,0,0,0.45);
          }
        }
      }
    }
    .account-center {
      height: 106px;
      border-top: 1px solid #ddd;
      .center-item {
        cursor: pointer;
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        width:50%;
        span {
          font-size:14px;
          font-family:Microsoft YaHei;
          font-weight:400;
          color:#333;
          margin-top: 10px;
        }
        .iconfont {
          width: 26px;
          height: 26px;
          color: #333;
          font-size: 20px;
          font-weight: 900;
          line-height: 26px;
          text-align: center;
        }
      }
    }
    .footer{
      width: 100%;
      height: 42px;
      // position: absolute;
      // bottom: 0;
      // left: 0;
      .el-button+.el-button {
        margin-left: 2px!important;
      }
      >.el-button{
        width: 55%;
        height: 100%;
        position: relative;
        border-radius:0;
        padding-right: 0px;
        &:last-child{
          padding-left: 45px;
        }
        i{
          width: 16px;
          height: 16px;
          display: inline-block;
          position: absolute;
          top: 12px;
          left: 56px;
        }
        .out{
          background: url("../../assets/baseImg/signout.png") center no-repeat;
        }
        .modifys{
          background: url("../../assets/baseImg/rivise.png") center no-repeat;
        }
      }
    }
  }
  .opcity_mask{
    position: fixed;
    top:0;
    left: 0;
    width: 100%;
    height: 100%;
    opacity: 0;
    z-index: 10000;
  }
  .normalDialog{
    .el-dialog{
      position: relative;
      .el-input .el-input--suffix{
        color:black
      }
      .content{
        padding-bottom: 24px;
        .row{
          position: relative;
          padding-bottom: 35px;
          .tipText{
            color: #f56c6c;
            position: absolute;
            bottom: 15px;
            left: 3px;
            font-size: 12px;
          }
          &:nth-child(2){
            padding-bottom: 35px;
          }
          label{
            position: absolute;
            line-height: 32px;
            display: inline-block;
            left: -16%;
            top: 0;
            span{
              color: red;
              line-height: 32px;
              display: inline-block;
            }
          }
          .againNewPwd{
            left: -22%;
          }
          .newPdw{
            left: -22%;
          }
          .el-input{
            width: 90%;
            .el-input__inner{
              height: 32px!important;
              border: 1px solid #dcdfe6!important;
            }
          }
          i{
            color: #F5222D;
            position: absolute;
            right: 12%;
            top: 10px;
          }
        }
        .pswStrong{
          box-sizing: border-box;
          padding-left: 20px;
          padding-bottom: 13px;
          position: relative;
          top: -12px;
          left: -17px;
          span{
            background-color: #ddd;
            width: 38px;
            height: 8px;
            display: inline-block;
            border-radius: 8px;
            &:first-child{
              position: absolute;
              top:5px;
              left: 18px;
              z-index: 50;
            }
            &:nth-child(2){
              position: absolute;
              top:5px;
              left: 52px;
              z-index: 30;
              background-color: #D8D8D8;
            }
            &:nth-child(3){
              position: absolute;
              top:5px;
              left: 85px;
              z-index: 20;
              background-color: rgba(155,155,155,.3);
            }
            &.lowColor{
              background-color: #F5222D;
            }
            &.midColor{
              background-color: #FFAC2F;
            }
            &.highColor{
              background-color: #52C41A;
            }
          }
          label{
            position: absolute;
            top:0;
            left: 140px;
            z-index: 30;
          }
          i{
            position: absolute;
            top:0;
            left: 210px;
            z-index: 30;
            font-style: normal;
            &.lowColor{
              color: #F5222D;
            }
            &.midColor{
              color: #FFAC2F;
            }
            &.highColor{
              color: #52C41A;
            }
          }
        }
      }
      .footer{
        position: absolute;
        bottom:0;
        left: 0;
        width: 100%;
        height: 51px;
        background-color: #F8F8F8;
        padding-top: 12px;
      }
    }
  }
  .normalDialog .el-dialog {
    width: 6rem;
  }
  .normalDialog .el-dialog .el-dialog__header {
    height: .4rem;
    background-color: #1890ff;
    position: relative;
  }
  .normalDialog .el-dialog .el-dialog__header .el-dialog__title {
    position: absolute;
    top: .09rem;
    left: 4%;
    font-size: .15rem;
    color: #fff;
    font-weight: 400;
    font-family: PingFangSC-Regular;
  }
  .normalDialog .el-dialog .el-dialog__body .el-button {
    margin-right: 0;
  }
  .normalDialog .el-dialog .el-dialog__body {
    padding: .5rem 0 .5rem 22%;
  }
  .normalDialog .el-dialog .el-dialog__header .el-dialog__headerbtn {
    position: absolute;
    top: .08rem;
    right: 2%;
    padding: 0;
    background: 0 0;
    border: none;
    outline: 0;
    cursor: pointer;
    font-size: .2rem;
    color:white!important;
    .el-dialog__headerbtn .el-dialog__close {
      color:white!important;
    }
  }
  .normalDialog .el-dialog .el-dialog__body .el-button {
    height: .32rem;
    line-height: .06rem;
    margin-right: .25rem;
  }
  .normalDialog .el-dialog .el-dialog__header .el-dialog__headerbtn .el-dialog__close{
    color:white!important;
  }
</style>


